import React from 'react';
import { DualAxes } from '@ant-design/charts';
import style from './style.module.css'
import { Tag } from 'antd';

const DemoLine = () => {
    var data = [
        {
            year: '1991',
            value: 3,
            count: 10,
        },
        {
            year: '1992',
            value: 4,
            count: 4,
        },
        {
            year: '1993',
            value: 3.5,
            count: 5,
        },
        {
            year: '1994',
            value: 5,
            count: 5,
        },
        {
            year: '1995',
            value: 4.9,
            count: 4.9,
        },
        {
            year: '1996',
            value: 6,
            count: 35,
        },
        {
            year: '1997',
            value: 7,
            count: 7,
        },
        {
            year: '1998',
            value: 9,
            count: 1,
        },
        {
            year: '1999',
            value: 13,
            count: 20,
        },
    ];
    var config = {
        data: [data, data],
        xField: 'year',
        yField: ['value', 'count'],
        height: 140,
        geometryOptions: [
            {
                geometry: 'line',
                color: '#5B8FF9',
            },
            {
                geometry: 'line',
                color: '#5AD8A6',
            },
        ],
    };

    return <div className={style.charts}>
        <p className={style.title}>
            <span>销售额</span>
            <Tag color="blue">昨日</Tag>
        </p>
        <p className={style.curSell}>0</p>
        <p className={style.title}>总销售额：121947.25元</p>
        <div style={{ height: 100 }}>
            <DualAxes {...config} />
        </div>
    </div >;
};

export default DemoLine;